<template>
    <div class="chip" v-if="isShowChip">
      <div class="chip__icon">
        <span>
          <icon-font type="icon-tiaoseban" />
        </span>
      </div>
      <p>Neumorphic Design</p>
      <div class="chip__close">
        <span>
          <icon-font type="icon-jurassic_close"  @click="close"/>
        </span>
      </div>
    </div>
</template>

<script lang="ts" setup>
import { IconFont } from '@/base-ui/Icons/index'
import { ref } from 'vue'
const props = withDefaults(
  defineProps<{
    message?: string
    type?: string
  }>(),{
    message:'Neumorphic Design',
    type: 'succes'
  }
)

const isShowChip = ref(true)
const close =()=>{
  isShowChip.value = false
}
</script>
<style lang="less" scoped>
/*  CHIP  */
.chip {
  justify-content: center;
  text-align: center;
  width: 300px;
  margin-top: -50px;
  margin-left: 700px;
  height: 60px;
  border-radius: 1rem;
  box-shadow: -14px 14px 28px@greyLight-2,  14px -14px 28px @white;
  display: flex;
  position: absolute;
  justify-content: space-between;
  align-items: center;
  z-index: 99;
  background-size: 50px 60px;
  // background-color: rgb(162, 112, 228);
}
.chip__icon {
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  margin: 0 0 0 0.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.8rem;
  color: @primary;
}
.chip p {
  font-size: 0.9rem;
  margin-top: 15px;
  margin-left: -1.8rem;
  // color: @greyDark;
  color: rgb(101, 56, 207);
  font-weight: 700;
}
.chip__close {
  width: 1.6rem;
  height: 1.6rem;
  margin-right: 5px;
  margin-bottom: 40px;
  display: flex;
  font-size: 1.6rem;
  color: @greyLight-3;
  cursor: pointer;
}
</style>
